import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import { createBrowserHistory } from 'history';
import { connectRouter, routerMiddleware, ConnectedRouter } from 'connected-react-router'
import { renderRoutes } from 'react-router-config';
import reduxMiddleware from './middleware/redux';
import '@babel/polyfill';
import 'typeface-roboto'
import 'moment/locale/zh-cn';
import * as reducers from './reducers';
import routes from './routes';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


const history = createBrowserHistory();
const router = connectRouter(history);
const middleware = routerMiddleware(history);
// eslint-disable-next-line
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  combineReducers({
    router,
    ...reducers,
  }),
  composeEnhancers(applyMiddleware(middleware, reduxMiddleware))
);

ReactDOM.render(
  <Provider store={store}>
    { /* ConnectedRouter will use the store from Provider automatically */}
    <ConnectedRouter history={history}>
      {renderRoutes(routes)}
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root'));
registerServiceWorker();
